<template lang="pug">
  .container
    .lession__detail__tabs
      a(href="") 导学详情
      a(href="") 测验题目
      a(href="") 看他人笔记
    .row
      .col-sm-3
        h2.side__menu__title 课本
          .side__menu__switch
            i.icon
            | 切换
        h3.side__menu__dt 高二课本
        ul.side__menu__list
          li
            a.side__menu__sub.expand(href="") 第11章   坐标平面有理数函数
            ul
              li
                a(href="") 二次函数
              li
                a.side__menu__sub(href="") 不等式方式
                ul
                  li
                    a(href="") 坐标平面有理数函数
      .col-sm-9
        .lession__detail__video
          h2 一元二次方程二次函数
          .video
        .lession__detail__note
          .lession__detail__note__hd
            h2 学生笔记
            .lession__note__select
              .lession__note__options 全部班级
            .lession__note__expand
          .lession__detail__note__bd
            .split
            .note__card__list
              .note__card(v-for="item in notes")
                h5 {{item.studentName}}
                .note__card__content
                  span.ts {{item.createdTime}}
                  p {{item.noteContent || '占位'}}
</template>
<style lang="scss">
.lession__detail__note {
  margin-top: 20px;
}
.lession__detail__note__hd {
  padding: 0 35px;
  background: #fafafa;
  border-radius: 10px;
  @include clearfix();
  h2 {
    float: left;
    margin: 0;
    margin-right: 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 46px;
  }
}
.lession__note__select {
  float: left;
  width: 100px;
  padding: 0 24px;
  height: 24px;
  margin-top: (46-24)/2 + px;
  border: 1px solid $mainColor;
  font-size: 12px;
  border-radius: 6px;
  line-height: 24px;
  color: $mainColor;
}
.lession__note__expand {
  float: right;
  margin-top: (46-8)/2 + px;
  width: 8px;
  height: 14px;
  background: url('/images/icon_open_normal.png') no-repeat 100%;
}
.lession__detail__note__bd {
  background: #fafafa;
  .note__card__list {
    border-radius: 0;
  }
  .split {
    margin: 0 24px;
    border-top: 1px solid #ececec;
  }
}
</style>

<script>
import api from 'api/lession'
export default {
  data () {
    return {
      notes: []
    }
  },
  created () {
    this.getNotes()
  },
  methods: {
    getNotes () {
      api.getNotes({
        previewvideoid: '123533667250208768' || this.$route.params.bookid,
        from: 0,
        size: 10
      }).then((response) => {
        this.notes = response.data.data.notes
      })
    }
  }
}
</script>

